<!--下载器数据统计 按分时统计 -->
<template>
<div class="block" v-loading="loading" element-loading-text="拼命加载中">
    <statis-header @getMsg="getMsg" :baseExcelURL="baseExcelURL" :headerConfig="headerConfig"></statis-header>
    <chart-modal :chartkey="chartOptionKeys.chart01" style="margin-top:10px;" v-bind:option="chartoptions.dataall" :chartConfig="chartConfig"></chart-modal>
    <div class="tableBorder">
    <el-table id="DataTable" :data="tableData" border style="margin:10px 0px 10px 0px;">
        <el-table-column fixed prop="date" label="时间"></el-table-column>
        <el-table-column prop="sum" label="总计"></el-table-column>
        <el-table-column prop="h00" label="0点"></el-table-column>
        <el-table-column prop="h01" label="1点"></el-table-column>
        <el-table-column prop="h02" label="2点"></el-table-column>
        <el-table-column prop="h03" label="3点"></el-table-column>
        <el-table-column prop="h04" label="4点"></el-table-column>
        <el-table-column prop="h05" label="5点"></el-table-column>
        <el-table-column prop="h06" label="6点"></el-table-column>
        <el-table-column prop="h07" label="7点"></el-table-column>
        <el-table-column prop="h08" label="8点"></el-table-column>
        <el-table-column prop="h09" label="9点"></el-table-column>
        <el-table-column prop="h10" label="10点"></el-table-column>
        <el-table-column prop="h11" label="11点"></el-table-column>
        <el-table-column prop="h12" label="12点"></el-table-column>
        <el-table-column prop="h13" label="13点"></el-table-column>
        <el-table-column prop="h14" label="14点"></el-table-column>
        <el-table-column prop="h15" label="15点"></el-table-column>
        <el-table-column prop="h16" label="16点"></el-table-column>
        <el-table-column prop="h17" label="17点"></el-table-column>
        <el-table-column prop="h18" label="18点"></el-table-column>
        <el-table-column prop="h19" label="19点"></el-table-column>
        <el-table-column prop="h20" label="20点"></el-table-column>
        <el-table-column prop="h21" label="21点"></el-table-column>
        <el-table-column prop="h22" label="22点"></el-table-column>
        <el-table-column prop="h23" label="23点"></el-table-column>
    </el-table>
    </div>
</div>
</template>

<script>
import StatisHeader from './header/StatisHeader';
import ChartModal from './ChartModal'

import {
    setdataAll01,
    getDoubleMax
} from '../config/setChart.js';
import {
    getChartConfig,
    HeaderConfig
} from '../config/toolsui.config.js';
export default {
    data() {
        return {
            getDataByHourURL: '' + this.$store.state.domain + '/bzDCP/hour/show',
            baseExcelURL: '' + this.$store.state.domain + '/bzDCP/hour/export',
            tableData: [],
            headerData: '',
            headerConfig: {},
            currentPage: 1,
            pageSize: 10,
            total: 0,
            chartoptions: {
                dataall: {},
            },
            chartConfig: getChartConfig('100%', '500px'),
            chartOptionKeys: {
                chart01: 'chart01'
            },
            loading: true
        }
    },
    components: {
        StatisHeader,
        ChartModal
    },
    created() {
        this.initDataAll();
    },
    methods: {
        getMsg(data) {
            this.headerData = data;
            this.search();
        },
        getSearchData(response) {
            this.tableData = response.data.result;
            this.total = response.data.total;
            var legends = ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点'];
            var arrLength = response.data.result.length;
            var datas = new Array(); //先声明一维
            for (var k = 0; k < arrLength; k++) { //一维长度为i,i为变量，可以根据实际情况改变
                datas[k] = new Array(); //声明二维，每一个一维数组里面的一个元素都是一个数组；
            }
            for (var i = 0; i < arrLength; i++) {
                datas[i][0] = response.data.result[i].h00;
                datas[i][1] = response.data.result[i].h01;
                datas[i][2] = response.data.result[i].h02;
                datas[i][3] = response.data.result[i].h03;
                datas[i][4] = response.data.result[i].h04;
                datas[i][5] = response.data.result[i].h05;
                datas[i][6] = response.data.result[i].h06;
                datas[i][7] = response.data.result[i].h07;
                datas[i][8] = response.data.result[i].h08;
                datas[i][9] = response.data.result[i].h09;
                datas[i][10] = response.data.result[i].h10;
                datas[i][11] = response.data.result[i].h11;
                datas[i][12] = response.data.result[i].h12;
                datas[i][13] = response.data.result[i].h13;
                datas[i][14] = response.data.result[i].h14;
                datas[i][15] = response.data.result[i].h15;
                datas[i][16] = response.data.result[i].h16;
                datas[i][17] = response.data.result[i].h17;
                datas[i][18] = response.data.result[i].h18;
                datas[i][19] = response.data.result[i].h19;
                datas[i][20] = response.data.result[i].h20;
                datas[i][21] = response.data.result[i].h21;
                datas[i][22] = response.data.result[i].h22;
                datas[i][23] = response.data.result[i].h23;
            }
            var setMaxs = getDoubleMax([datas]);
            this.$store.state.chartOption['chart01'] = setdataAll01(legends, [{
                        name: response.data.result[0].date,
                        type: 'line',
                        data: datas[0]
                    },
                    {
                        name: response.data.result[1].date,
                        type: 'line',
                        data: datas[1]
                    }
                ],
                '',
                [{
                    name: '',
                    formatter: '',
                    max: setMaxs
                }]
            );
        },
        getData() {
            this.loading = false;
            this.$ajax.post(this.getDataByHourURL, this.qs.stringify({})).then(response => {
                if (response.status == 200) {
                    this.getSearchData(response);
                } else {
                    this.$message.warning('网络错误!');
                    return;
                }
            }).catch(function (error) {
                console.log(error);
            });
        },
        search() {
            let _this = this.headerData;
            if (this.TimeSpace == "") {
                this.$message.warning("查询条件不能为空！");
                return;
            } else {
                this.loading = true;
                this.currentPage=1;
                this.$ajax.post(this.getDataByHourURL, this.qs.stringify({
                    searchTime: _this.searchTime,
                    compTime: _this.compTime,
                    radio: _this.radio,
                    check: _this.check,
                    dataType: _this.dataType,
                    channelType:_this.channelType,
                    appType: _this.siteType,
                    appid: _this.channel,
                    browser: _this.browser,
                    area: _this.area,
                    prov: _this.prov,
                    winnt: _this.winnt,
                    wow: _this.wow,
                    antiVirus:_this.softenviron,
                    isDev:_this.isDev,
                    isBar:_this.isBar
                })).then(response => {
                    if (response.status == 200) {
                        this.getSearchData(response);
                    } else {
                        this.$message.warning('网络错误!');
                        return;
                    }
                    this.loading = false;
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        initDataAll() {
            this.$store.state.chartOption = {
                chart01: {},
            };
            this.getData();
            this.headerConfig = HeaderConfig;
            
            HeaderConfig.timePoint = true;
            HeaderConfig.dataType = true;
            HeaderConfig.siteType = true;
            HeaderConfig.channel = true;
            HeaderConfig.browser = true;
            HeaderConfig.prov = true;
            HeaderConfig.area = true;
            HeaderConfig.wow = true;
            HeaderConfig.winnt = true;
            HeaderConfig.isCloud = true;
            HeaderConfig.softenviron = true;
            HeaderConfig.isBar = true;
            HeaderConfig.isDev = true;
            HeaderConfig.channelType = true;
            HeaderConfig.dataTypesoft = false;
            HeaderConfig.dataTypeBrowser = false;
            HeaderConfig.timeSpace = false;
        }
    }
}
</script>

<style scoped>
#selecType {
    display: inline-block;
    position: relative;
    bottom: 0px;
    left: 0px;
    top: 10px;
}

#systemPadding {
    margin-top: 15px;
}
</style>
